<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/tags.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<title>设备配置</title>
<script type="text/javascript">
	

	$(function () {
		$('.tab_item').eq(0).css('background-color', '#0A985D');
		for (var i=1;i<=2;i++) {
			$('.conf_content').eq(i).hide();
		}		

		$('#branch').change(function(){
			resetRoadSelect();
			if ($('#branch').val() != null && $('#branch').val() != '--请选择--') {
				$.get(ctx + "/road.json", {branchId:$('#branch').val()}, function(json) {
					if(json.result) {
						var data = json.data;
						$.each(data, function(n, road){
							$('#road').append('<option value="'+road.id+'">'+road.name+'</option>');
						});
					} else {
						alert(json.message);
					}
				}, "json");
			}
		});
		
		$('#road').change(function(){
			resetStationSelect();
			if ($('#road').val() != null && $('#road').val() != '--请选择--') {
				$.get(ctx + "/station.json", {id:$('#road').val()}, function(json) {
					if(json.result) {
						var data = json.data;
						$.each(data, function(n, station){
							$('#station').append('<option value="'+station.id+'">'+station.name+'</option>');
						});
					} else {
						alert(json.message);
					}
				}, "json");
			}
		});
		
		$('#station').change(function(){
			if ($('#station').val() != null && $('#station').val() != '--请选择--' && $('#station').val() != null) {
				checkInfoByStationId();
			}
		});
		
		$('.check_info').click(function() {
			if ($('#id').val() != null && $('#id').val() != 'undefined' && $('#id').val() != '') {
				checkInfo(this);
			}
		});
		
		$('.set_info').click(function() {
			if ($('#id').val() != null && $('#id').val() != 'undefined' && $('#id').val() != '') {
				confInfo(this);
			}
		});
	});
	
	
	function isValid() {
		
		return false;
	}
	
	function checkInfo(elem) {
		$.post(ctx + "/checkDevInfo.json?type="+$(elem).data('type'), {id:$('#id').val()}, function(json) {
			if(json.result) {
				setInfo(json.data);
			} else {
				alert(json.message);
			}
		}, "json");
	}
	
	
	function checkInfoByStationId() {
		$.post(ctx + "/devInfo.json", {stationId:$('#station').val()}, function(json) {
			if(json.result) {
				setInfo(json.data);
			} else {
				alert(json.message);
			}
		}, "json");
	}
	
	function confInfo(elem) {
		$.post(ctx + "/setInfo.json?type="+$(elem).data('type'), $('#dev_info').serialize(), function(json) {
			alert(json.message);
		}, "json");
	}
	
	var devId = 0;
	function setInfo(info) {
		$('#id').val(info.id);
		$('#pnServerIp').val(info.pnServerIp);
		$('#pnLocalIp').val(info.pnLocalIp);
		$('#vpnServerIp').val(info.vpnServerIp);
		$('#vpnLocalIp').val(info.vpnLocalIp);
		$('#wiredReportIp').val(info.wiredReportIp);
		$('#wirelessReportIp').val(info.wirelessReportIp);
		$('#netCardAIp').val(info.netCardAIp);
		$('#netCardASubIp').val(info.netCardASubIp);
		$('#netCardAGatewayIp').val(info.netCardAGatewayIp);
		$('#netCardAMacAddress').val(info.netCardAMacAddress);
		$('#netCardBIp').val(info.netCardBIp);
		$('#netCardBSubIp').val(info.netCardBSubIp);
		$('#netCardBGatewayIp').val(info.netCardBGatewayIp);
		$('#netCardBMacAddress').val(info.netCardBMacAddress);
		$('#netCard3gIp').val(info.netCard3gIp);
		$('#netCard3gSubIp').val(info.netCard3gSubIp);
		$('#netCard3gGatewayIp').val(info.netCard3gGatewayIp);
		$('#netCard3gMacAddress').val(info.netCard3gMacAddress);
		$('#checkIntervalTime').val(info.checkIntervalTime);
		$('#checkTimes').val(info.checkTimes);
		$('#pnServerIpState').val(info.pnServerIpState);
		$('#pnLocalIpState').val(info.pnLocalIpState);
		$('#vpnServerIpState').val(info.vpnServerIpState);
		$('#vpnLocalIpState').val(info.vpnLocalIpState);
		$('#smsContent').val(info.smsContent);
		$('#phoneNum').val(info.phoneNum);	
	}
	
	function clearInfo() {
		$('#id').val('');
		$('#pnServerIp').val('');
		$('#pnLocalIp').val('');
		$('#vpnServerIp').val('');
		$('#vpnLocalIp').val('');
		$('#wiredReportIp').val('');
		$('#wirelessReportIp').val('');
		$('#netCardAIp').val('');
		$('#netCardASubIp').val('');
		$('#netCardAGatewayIp').val('');
		$('#netCardAMacAddress').val('');
		$('#netCardBIp').val('');
		$('#netCardBSubIp').val('');
		$('#netCardBGatewayIp').val('');
		$('#netCardBMacAddress').val('');
		$('#netCard3gIp').val('');
		$('#netCard3gSubIp').val('');
		$('#netCard3gGatewayIp').val('');
		$('#netCard3gMacAddress').val('');
		$('#checkInterval').val('');
		$('#checkTimes').val('');
		$('#pnServerIpState').val('');
		$('#pnLocalIpState').val('');
		$('#vpnServerIpState').val('');
		$('#vpnLocalIpState').val('');
		$('#smsContent').val('');
		$('#phoneNum').val('');
	}
	
	function resetRoadSelect() {
		$('#road').empty();
		$('#station').empty();
		$('#road').append('<option>--请选择--</option>');
		$('#station').append('<option>--请选择--</option>');
		clearInfo();
	}
	
	function resetStationSelect() {
		$('#station').empty();
		$('#station').append('<option>--请选择--</option>');
		clearInfo();
	}
	
	
	function tabSelect(tabNum) {
		for (var i=0;i<=2;i++) {
			if(tabNum == i) {
				$('.conf_content').eq(i).show();
				$('.tab_item').eq(i).css('background-color', '#0A985D');
			}
			else {
				$('.conf_content').eq(i).hide();
				$('.tab_item').eq(i).css('background-color', '#e4e4e4');
			}
		}
	}
</script>
<style type="text/css">
	a.a_button {
		margin: 5px 40px 0px;
	}
	
	.top_bar {
		height:40px;
		line-height:40px;
		margin-left:20px;
	}
	
	.top_bar label{
		margin-right:5px;
	}
	
	.top_bar select{
		margin-right:40px;
	}
	
	.conf_container {
		border: 2px solid #f4f4f4;
		padding-bottom: 10px;
	}
	
	.configure_tab {
		height: 30px;
		margin-bottom:10px;
		background-color: #fff;
	}
	
	.configure_tab .con_tab_list li {
		display: inline-block;
		width:120px;
		text-align: center;
		height: 30px;
		line-height: 30px;
		background-color: #e4e4e4;
	}
	
	.configure_tab .con_tab_list li a{
		display: inline-block;
		width:100%;
	}

	.conf_content {
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.conf_content p {
		height: 30px;
		line-height: 30px;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	
	.conf_content .textarea_wraper {
		line-height: 56px;
		height: 56px;
		margin-top: 7px;
		margin-bottom: 5px;
	}
	
	.conf_content_table td{
	    height:30px;
	    border:0px;
	    text-align:center;   
	}
	.right_con_phoneNum{margin-top:10px;}
	.right_con_text{
	   width:300px;
	   height:50px;
	}
	.conf_bottom{
		margin-top:10px;
		margin-bottom: 10px;
	}
	.conf_bottom input{margin-left:10px;}
</style>
</head>
<body>
	<div class="top_bar">
		<label class="label_s_width">管理处:</label>
		<select name="branch" id="branch">
			<option>--请选择--</option>
			<c:forEach var="branch" items="${branches }" varStatus="s">
				<option value="${branch.id }">${branch.name }</option>
			</c:forEach>
        </select>
        <label class="label_s_width">路段:</label>
		<select name="road" id="road">
			<option>--请选择--</option>
        </select>
        <label class="label_s_width">收费站:</label>
		<select name="station" id="station">
			<option>--请选择--</option>
        </select>
	</div>
	<div class="conf_container">
		<div class="configure_tab">
			<ul class="con_tab_list">
				<li class="tab_item"><a onclick="javascript:tabSelect(0)">检测上报配置</a></li>
				<li class="tab_item"><a onclick="javascript:tabSelect(1)">设备网卡</a></li>
				<li class="tab_item"><a onclick="javascript:tabSelect(2)">其他设备配置</a></li>
			</ul>
		</div>
		<div class="conf_panel">
			<form id="dev_info" name="dev_info" action="">
			<div class="conf_content">
					<input id="id" name="id" type="hidden"/> 
					<div class="left_conf_content">
						<p>
							<label class="label_width">A路-a0:</label>
							<input class="input_width" id="pnServerIp" name="pnServerIp" type="text"></input>
						</p>
						<p>
							<label class="label_width">A路-a1:</label>
							<input class="input_width" id="pnLocalIp" name="pnLocalIp" type="text"></input>
						</p>
						<p>
							<label class="label_width">B路-b0:</label>
							<input class="input_width" id="vpnServerIp" name="vpnServerIp" type="text"></input>
						</p>
						<p>
							<label class="label_width">B路-b1:</label>
							<input class="input_width" id="vpnLocalIp" name="vpnLocalIp" type="text"></input>
						</p>
						<p>
							<label class="label_width">有线上报接收端:</label>
							<input class="input_width" id="wiredReportIp" name="wiredReportIp" type="text"></input>
						</p>
						<p>
							<label class="label_width">无线上报接收端:</label>
							<input class="input_width" id="wirelessReportIp" name="wirelessReportIp" type="text"></input>
						</p>
<!-- 						<p>
							<label class="label_width">有线上报端口号:</label>
							<input class="input_width" id="" name="" type="text"></input>
						</p>
						<p>
							<label class="label_width">无线上报端口号:</label>
							<input class="input_width" id="" name="" type="text"></input>
						</p>	 -->
					</div>
					<div class="right_conf_content">
						<div class="textarea_wraper">
							<label class="label_width">手机短信上报内容：</label>
							<textarea class="right_con_text" id="smsContent"  name="smsContent"></textarea>
						</div>
					<p>
						<label class="label_width">手机短信上报号：</label>
						<input class="input_width" id="phoneNum"  name="phoneNum" type="text"></input>
					</p>
					</div>
					<div><a class="a_button check_info" data-type="0">查询</a>
						<a class="a_button set_info" data-type="0">设置</a>
					</div>
			</div>
			<div class="conf_content">
				<div class="conf_content_table">
                <table >
                    <tr>
                        <td ></td>
                        <td>IP地址</td>
                        <td><label class="label_width">子网掩码</label></td>
                        <td><label class="label_width">网关</label></td>
                        <td id=""><label class="label_width">MAC地址</label></td>
                    </tr>
                    <tr>
                        <td><label >网卡1—A路：</label></td>
                        <td><input class="input_width" id="netCardAIp" name="netCardAIp" type="text"></input></td>
                        <td><input class="input_width" id="netCardASubIp" name="netCardASubIp" type="text"></input></td>
                        <td><input class="input_width" id="netCardAGatewayIp" name="netCardAGatewayIp" type="text"></input></td>
                        <td><input class="input_width" id="netCardAMacAddress" name="netCardAMacAddress" type="text"></input></td>
                    </tr>
                    <tr>
                        <td><label >网卡2—B路：</label></td>
                        <td><input class="input_width" id="netCardBIp" name="netCardBIp" type="text"></input></td>
                        <td><input class="input_width" id="netCardBSubIp" name="netCardBSubIp" type="text"></input></td>
                        <td><input class="input_width" id="netCardBGatewayIp" name="netCardBGatewayIp" type="text"></input></td>
                        <td><input class="input_width" id="netCardBMacAddress" name="netCardBMacAddress" type="text"></input></td>
                    </tr>
                    <tr>
                        <td><label >3G无线网卡：</label></td>
                        <td><input class="input_width" id="netCard3gIp" name="netCard3gIp" type="text"></input></td>
                        <td><input class="input_width" id="netCard3gSubIp" name="netCard3gSubIp" type="text"></input></td>
                        <td><input class="input_width" id="netCard3gGatewayIp" name="netCard3gGatewayIp" type="text"></input></td>
                        <td><input class="input_width" id="netCard3gMacAddress" name="netCard3gMacAddress" type="text"></input></td>
                    </tr>
                </table>
                </div>
                <div class="conf_content_button">
					<a class="a_button check_info" data-type="1">查询</a>
					<a class="a_button set_info" data-type="1">设置</a>
				</div>
                
			</div>
			<div class="conf_content">	
				<p>
			       <label class="label_width">检测时间间隔（单位/秒):</label>
				   <input class="input_s_width" id="checkIntervalTime" name="checkIntervalTime" type="text" disabled="disabled" value="1"></input>
				</p>
				<p>
			       <label class="label_width">判断结果的连续检测次数 :</label>
				   <input class="input_s_width" id="checkTimes" name="checkTimes" type="text" disabled="disabled" value="3"></input>
				</p>
				<p><label class="label_width">继电控制A路机器重启：</label>
                        <select disabled="disabled">
                            <option>否</option>
                            <option>是</option>
                        </select>
                </p>
                <p><label class="label_width">继电控制A路机器重启：</label>
                        <select disabled="disabled">
                            <option>否</option>
                            <option>是</option>
                        </select>
                 </p>		
			    <p>
			       <label class="label_width">用网卡1检测A-a0:</label>
				   <select  id="pnServerIpState" name="pnServerIpState">
                        <option value="1">是</option>
				   		<option value="0">否</option>
				   </select>
				</p>
				<p>
			       <label class="label_width">用网卡1检测A-a1:</label>
				   <select  id="pnLocalIpState" name="pnLocalIpState">
                        <option value="1">是</option>
				   		<option value="0">否</option>
				   </select>
				</p>
				<p>
			       <label class="label_width">用网卡2检测B-b0:</label>
				   <select  id="vpnServerIpState" name="vpnServerIpState">
                        <option value="1">是</option>
				   		<option value="0">否</option>
				   </select>
				</p>
				<p>
			       <label class="label_width">用网卡2检测B-b1:</label>
				   <select  id="vpnLocalIpState" name="vpnLocalIpState">
                        <option value="1">是</option>
				  		<option value="0">否</option>
				   </select>
				</p>
                <div class="conf_content_button">
					<a class="a_button check_info" data-type="2">查询</a>
					<a class="a_button set_info" data-type="2">设置</a>
				</div>
			</div>
			</form>
		</div>
		
	</div>
<!--     <div class="conf_bottom">
		<input type="checkbox" name="checkbox"/>使用UDP (ID无效，现场方式)
       	<label>设备IP:</label><input class="input_width" id="" name="" type="text" />
        <label>设备端口:</label><input class="input_width" id="" name="" type="text"/>
	</div> -->
</body>
</html>
